<template>
	<view class="h-fill">
		<view v-if="list.length">
			<view class="t-pad b-pad uni-flex align-center">
				<view class="uni-flex-extend">
					<u-line></u-line>
				</view>
				<text class="l-mg r-mg uni-text-gray" style="color: #FE8917;">平台推荐</text>
				<view class="uni-flex-extend">
					<u-line></u-line>
				</view>
			</view>
			<view @click="navToDetail(index)" v-for="(item, index) in list" :key="item._id" class="list-item uni-flex uni-column round-corner">
				<view class="uni-flex align-center pad">
					<u-lazy-load :borderRadius="20" class="list-item-logo" loading-img="/static/easy-loadimage/loading.gif" error-img="/static/easy-loadimage/loadfail.png"
					 :image="item.photos[0] || $getCloudStorageUrl('/logo.jpg')" :height="160" img-mode="aspectFill"></u-lazy-load>
					<view class="uni-flex-extend uni-ellipsis">
						<view class="uni-flex align-center">
							<text class="list-item-title uni-flex-extend uni-ellipsis">{{item.name}}</text>
							<u-tag :text="item.category" shape="circle" bgColor="rgba(9, 129, 255, 0.2)" :color="formatColor(item.category) || '#7C6CEE'"
							 borderColor="rgba(9, 129, 255, 0.2)"></u-tag>
						</view>
						<view class="uni-flex align-center uni-text-gray" style="padding: 6rpx 0;">
							<image class="list-item-img" mode="aspectFit" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dingwei_juli@2x.png"></image>
							<text v-if="item.distance" class="list-item-distance">{{formatDistance(item.distance)}}</text>
							<view class="list-item-seprator" v-if="item.distance && item.address"></view>
							<text class="uni-flex-extend uni-ellipsis" v-if="item.address">{{item.address}}</text>
						</view>
						<view class="uni-flex align-center">
							<view class="uni-flex align-center uni-flex-extend">
								<image @click.stop="navToLocation(index)" class="list-item-act" mode="aspectFit" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dingwei@2x.png"></image>
								<image v-if="item.phone" @click.stop="makePhoneCall(index)" mode="aspectFit" class="list-item-act" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dianhua@2x.png"></image>
							</view>
							<text class="uni-text-gray">服务次数：{{item.remainTimes || 0}}/{{item.serviceTimes || 0}}</text>
						</view>
					</view>
				</view>
				<u-line></u-line>
				<view class="pad">
					<view class="list-item-reason b-mg">{{item.recommendReason || '-'}}</view>
					<scroll-view :scroll-x="true" class="list-item-imgs">
						<view v-for="(url, idx) in item.photos" :key="url" @click.stop="handlePreview(item, idx)" class="list-item-imgs-img">
							<u-lazy-load class="h-fill v-fill" :borderRadius="20" loading-img="/static/easy-loadimage/loading.gif" error-img="/static/easy-loadimage/loadfail.png"
							 :image="url" :height="160" img-mode="aspectFill"></u-lazy-load>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		getColor
	} from "../../common/colorUtil.js"
	import {
		getServiceList
	} from "../../api/platform/store.js"
	var sysInfo;
	export default {
		name: "service-list",
		data() {
			return {
				list: [],
				loadingStatus: 'noMore',
				imageStyle: {
					'border-radius': '20rpx'
				}
			}
		},
		props: {
			level: {
				type: Number,
				default: -1
			},
			loadRemainTimes: {
				type: Boolean,
				default: true
			},
			categoryId: {
				type: Number,
				default: -1
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		watch: {
			level(newVal) {
				this.reload();
			},
			categoryId(newVal) {
				this.reload();
			}
		},
		created() {},
		mounted() {
			this.reload();
		},
		methods: {
			handlePreview(item, idx) {
				this.$log("preview", item);
				// #ifndef MP-WEIXIN
				uni.previewImage({
					current: idx,
					urls: item.photos,
					fail: (err) => {
						this.$log("图片预览失败", err);
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				wx.previewImage({
					current: item.photos[idx], // 当前显示图片的http链接
					urls: item.photos // 需要预览的图片http链接列表
				})
				// #endif
			},
			navToDetail(idx) {
				this.$emit("itemClick", this.list[idx]);
			},
			navToLocation(idx) {
				let item = this.list[idx]
				uni.openLocation({
					latitude: item.location.coordinates[1],
					longitude: item.location.coordinates[0],
					address: item.address || '',
					success: (res) => {
						this.$log("打开地图查看位置成功", res);
					},
					fail: (err) => {
						this.$log("打开地图查看位置失败", err);
					}
				})
			},
			makePhoneCall(idx) {
				let item = this.list[idx]
				// #ifndef H5
				uni.makePhoneCall({
					phoneNumber: item.phone,
				})
				// #endif
			},
			formatDistance(meters) {
				if (meters < 1000) {
					return `${Math.floor(meters)}m`;
				} else {
					return `${Math.floor(meters / 1000)}km`;
				}
			},
			formatColor(key) {
				return getColor(key)
			},
			getUserLocation() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: "gcj02",
						success: (res) => {
							resolve({
								latitude: res.latitude,
								longitude: res.longitude
							});
						},
						fail: (err) => {
							resolve();
						}
					})
				});
			},
			async reload() {
				// #ifdef H5
				await this.loadList();
				// #endif
				// #ifndef H5
				let location = await this.getUserLocation();
				await this.loadList(location);
				// #endif
			},
			async loadList(location) {
				if (this.loadingStatus === "loading") {
					return;
				}
				this.list = [];
				this.loadingStatus = "loading";
				var query = {
					action: 'recommend',
					city: uni.getStorageSync('currentRegion').city.value
				};
				if (location) {
					query.userLocation = {
						longitude: location.longitude,
						latitude: location.latitude
					}
				}
				
				try {
					this.list = await getServiceList(query)
					this.loadingStatus = "more";
				} catch (e) {
					this.$log("获取商家推荐列表遇到错误", e);
					this.loadingStatus = "more";
				}
			}
		}
	}
</script>

<style lang="scss">
	.list-item {
		background-color: #FFFFFF;

		&-logo {
			width: 210rpx;
			height: 160rpx;
			margin-right: 20rpx;
		}

		&-title {
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 20rpx;
		}

		&-times {
			font-size: 24rpx;
			color: #656565;
		}

		&-distance {
			font-size: 24rpx;
		}

		&-seprator {
			width: 1px;
			height: 20rpx;
			background-color: #999999;
			margin: 0 10rpx;
		}

		&-area {
			font-size: 24rpx;
		}

		&-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		&-act {
			width: 46rpx;
			height: 46rpx
		}

		&-act:not(:last-child) {
			margin-right: 40rpx;
		}

		&-content {
			color: #353535;
			font-size: 22rpx;
			color: #ff8163;
			font-weight: bold;
			max-width: 280rpx;
		}

		&-line {
			height: 1rpx;
			background-color: #DDDDDD;
		}

		&-reason {
			color: #666666;
		}

		&-imgs {
			white-space: nowrap;
			height: 160rpx;

			&-img {
				display: inline-block;
				width: 210rpx;
				height: 160rpx;
			}

			&-img:not(:last-child) {
				margin-right: 4rpx;
			}
		}
	}

	.list-item:not(:last-child) {
		margin-bottom: 20rpx;
	}
</style>
